<template>
  <div>
  <el-table  :data="tableData"  stripe  style="width: 100%">
    <el-table-column  prop="course.courseName"  label="科目"  width="180">  </el-table-column>
    <el-table-column    prop="isOrder"    label="是否预约">
      <template slot-scope="scope">
        <el-button type="primary"  size="small" @click.native="getExamState(scope.$index,scope.row)">预约</el-button>
      </template>
     </el-table-column>
    <el-table-column  prop="examForm"    label="考试形式">    </el-table-column>
    <el-table-column       label="操作">
      <template slot-scope="scope">
        <el-button v-if="scope.row.examForm == '网上考试'" @click.native="startExam(scope.$index,scope.row)"  type="primary"  size="small">开始考试</el-button>
        <router-link to="/downloadExam">
          <el-button v-if="scope.row.examForm == '现场考试'"  type="primary"  size="small">打印准考证</el-button>
        </router-link>
      </template>
    </el-table-column>
    <el-table-column      prop="examTime" :formatter='dateFormat'   label="考试时间"></el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
    @current-change="handleCurrentChange"
      :current-page.sync="pageIndex"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</div>
</template>

<script>
  import {listExamOrder,saveExamOrder} from '@/axios/api'   //注意此处严格的格式
  import { formatDate } from '@/common/js/date.js'
  export default {
    data() {
      return {
        pageIndex:1,
        pageSize:10,
        total:100,
        tableData: [
        ],
      }
    },
    //定义的方法
    methods: {
      //时间格式化
      dateFormat:(row, column) => {
        let date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return formatDate(new Date(date),'yyyy-MM-dd hh:mm:ss');
      },
      handleCurrentChange(val) {
        this.pageIndex = val ;
        this.getExamMsg() ;
      },
      getExamMsg:function(){
        let param = {pageIndex : this.pageIndex}
        listExamOrder(param).then (res => {
          this.total = res.resData.total,
          this.pageSize = res.resData.pageSize,
          this.tableData = res.resData.list;
        })
      },
      //开始考试，转向试卷组件
      startExam:function(index,row){
        // alert(row.courseId);
        let cid = row.courseId;
        this.$router.push({name:'开始考试', path:'/stu_exam_start', params:{courseId:cid}});
      },
      //获取预约状态
      getExamState: function(index,row){
        let para = {
          examId : row.examId
        };
        saveExamOrder(para).then((res) => {
          if(res.status == 200){
            this.$message({
              showClose: true,
              message: '预约成功，注意不要错过考试时间',
              type: 'success'
            });

          }else{
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            });
          }
        });
      }
    },
    //浏览器刷新则会立即加载
    mounted() {
      this.getExamMsg();
    },


  }
</script>
